<template>
  <div class="container">
    <el-input
      name="emoji"
      v-model="content"
      type="textarea"
      :autosize="{ minRows: 11, maxRows: 4 }"
      placeholder="请输入内容"
      class="input"
    >
    </el-input>
    <picker
      :include="['people']"
      :showSearch="false"
      :showPreview="false"
      :showCategories="false"
      @select="addEmoji"
    />
  </div>
</template>
<script>
import { Picker } from "emoji-mart-vue";
export default {
  data() {
    return {
      content: "",
    };
  },
  methods: {
    addEmoji(e) {
      this.content += e.native;
    },
  },
  components: {
    Picker,
  },
};
</script>
<style scoped>
.input {
  font-family: "Helvetica Neue", sans-serif;
}

.emoji-mart[data-v-7bc71df8] {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 420px;
  color: #ffffff !important;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #fff;
  height: 100px;
}
</style>
